<template>
  <!--查询、新建、编辑、删除部门-->
  <section>
    <el-row>
      <!--搜索、创建行-->
      <el-col :span="20">
        <el-form :inline="true" size="mini">
          <el-form-item label="选择公司" >
            <el-select v-model="companyId" placeholder="请选择">
              <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button style="margin-bottom: 20px;text-align: right" @click="creatDepartment" size="mini">
          <icon name="plus"></icon>
        </el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-table :data="departments" style="width: 100%" size="mini">
        <el-table-column type="index" width="30" >
        </el-table-column>
        <el-table-column label="部门名称">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所处公司" >
          <template slot-scope="scope">
            <el-select v-show="scope.row.edit" v-model="scope.row.companyId" placeholder="请选择">
              <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
            </el-select>
            <!--<span  v-show="!scope.row.edit">{{scope.row.companyName}}</span>-->
            <span  v-show="!scope.row.edit">{{reCompanyName(scope.row.companyId)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" >
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.contact"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.contact}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" >
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.address"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" >
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.phone"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.phone}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="mini" type="danger">DEL</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </section>
</template>

<script>
  import {mapActions} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'

    export default {
        name: "departmentManagement",
      data(){
        return {
          departments:[],
          companies:[],
          companyId:null,
          warehouseList:[],
          department:{
            name:''
          }
        }
      },
      watch:{
        companyId(nv,ov){
          if(nv){
            this.loadDepartments(nv)
          }
        }
      },
      created(){
        //加载公司列表，用来选择
        this.loadCompanyList()
        //加载部门列表，用来显示
        this.getWarehouseList()
      },
      methods: {
        ...mapActions({
          fetch: 'fetch'
        }),
        getWarehouseList(){
          this.fetch({name:"getWarehouseList"})
            .then(res=>{
              console.log(res)
              this.warehouseList = res
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })
        },
        loadDepartments(companyId){
          console.log(companyId)
          this.fetch({name:"getDepartmentList",data:{companyId}})
            .then(res=>{
              console.log('公司下部门列表---------',res)
              this.departments=res
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })
        },
        reCompanyName(e){
          if(e){
            return this.companies.find(i =>i.id === e).companyName
          }else {
            console.log('没e')
            return ''
          }
        },
        creatDepartment(){
          console.log(this.departments)
          let tb = {companyId:this.companyId,name: '',contact: '',address: '',phone: '',edit:true}
          this.departments.push(tb)
        },
        loadCompanyList(){
          //加载公司列表
          this.fetch({name:"getCompanyList"})
            .then((res)=>{
              console.log('公司列表————————————————',res)
              this.companies = res
            })
            .catch((err)=>{
              console.log(err)
              errHandler.handle(this,err)
            })
        },
        del(scope){
          console.log(scope)
          this.$confirm('确认删除？')
            .then(()=> {
              this.fetch({name:"delDepartment",data:{id:scope.row.id}})
                .then(res=>{
                  console.log(res)
                  //更新下界面
                  this.loadDepartments(this.companyId)
                  this.$message({type:'success',message:'删除成功！'})
                })
                .catch(err=>{
                  console.log(err)
                  errHandler.handle(this,err)
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
              this.loading = false
            })
        },
        confirm(row){
          console.log(row)
          if(row.edit && row.edit === true){//目前是编辑状态
            //判断是否新创建
            if(row.id){//非新建，有id，要更新
              this.updateDepartment(row)
            }
            else {//新建的，有edit
              //保存新
              this.createDepartment(row)
              row.edit = !row.edit
            }
          }else {
            //点击之前是非编辑状态，改成编辑状态
            if(row.edit === undefined){
              Vue.set(row,'edit',true)//后续添加属性，需要vue联动
            }else {
              row.edit = true
            }
          }
        },
        createDepartment(department){
          this.fetch({name:"createDepartment",data:{...department}})
          .then(res=>{
            department.id = res.id
            this.$message({type:'success',message:'新建成功！'})
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
        },
        updateDepartment(department){
          this.fetch({name:"updateDepartment",data:{...department}})
            .then(res=>{
              console.log(res)
              department.edit = false
              console.log(this.departments)
              this.$message({type:'success',message:'更新成功！'})
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })
        }
      }
    }
</script>

<style scoped>

</style>
